<!--联系人-->
<script>
import { getNoticeCount } from '@/api/chat/friend'
import FriendListGroups from '@/views/chat/contacts/friendListGroups.vue'
import FriendContacts from '@/views/chat/contacts/friendContacts.vue'
import { getRequestCount } from '@/api/chat/friendRequest'

export default {
  components: {
    FriendListGroups,
    FriendContacts,
  },
  name: '',
  data() {
    return {
      //好有通知
      friendNotice: 0,
      //群通知
      groupsNotice: 0,
      tabsActive: 0
    }
  },
  methods: {
    toFindUser() {
      this.$router.push('/chat/findUser')
    },
    toFriendNew() {
      this.$router.push('/chat/friendNew')
    },

    /**
     * 查询好友
     */
    getFriendNotice() {
      getRequestCount().then(({ data }) => {
        this.friendNotice = data.friendCount
        this.groupsNotice = data.groupsCount
      })
    }

  },

  created() {
    this.getFriendNotice()
  }
}
</script>

<template>
  <div>
    <!--        搜索-->
<!--    <div class="findUser" @click="toFindUser">-->
      <van-sticky :offset-top="10">
        <van-search
          @click="toFindUser"
          show-action
          placeholder="搜索"
        />
      </van-sticky>
<!--    </div>-->

    <div class="cell">
      <van-swipe-cell>
        <van-cell @click="toFriendNew" :border="false" title="新朋友" :value="friendNotice"/>
        <van-cell :border="false" title="群通知" :value="groupsNotice"/>
      </van-swipe-cell>
    </div>
    <van-divider/>

    <!--    好友列表-->
    <div class="friendList">
      <van-tabs v-model="tabsActive">
        <van-tab title="好友">
          <friend-contacts/>
        </van-tab>
<!--        <van-tab title="分组">-->
<!--          <FriendListGroups/>-->
<!--        </van-tab>-->
      </van-tabs>
    </div>
  </div>
</template>

<style>

</style>
